WordPress Gutenberg 編輯器結構與尺寸調整指南

問題緣起：原生編輯器不能直接調整區塊大小

在使用WordPress的原生區塊編輯器(Gutenberg)時，許多用戶發現無法像其他設計工具那樣直接調整區塊的大小，尤其是圖像、文字區塊等元素。這是由於Gutenberg的設計理念所致。

Gutenberg編輯器的設計限制

原生功能限制

🛑 WordPress 原生「區塊編輯器」的限制：

• 無法自由調整區塊大小（寬高）
• 寬度高度多受主題與容器限制
• 用戶僅能調整「對齊方式」或「寬度百分比（全寬、寬幅）」

各類元件可調整項目

元件類型	可調整項目
圖片區塊	可手動輸入固定寬度（如 300px）、選擇對齊方式（置中、左對齊）
段落區塊	文字大小可調，但容器寬度取決於主題
群組/欄位區塊	可設定排列（左右分欄）、背景色、間距，但寬度受限制

設計限制的原因

⚠️ 為什麼不能自由調整大小？ Gutenberg編輯器的設計理念是「以一致性為優先」，主要考量：

• 讓內容在不同裝置上有一致外觀
• 防止使用者破壞版型（例如圖片太大擠壞版面）
• 由主題CSS + 區塊屬性決定排版結構

Gutenberg 編輯器的核心結構邏輯

要理解Gutenberg的工作方式，首先需要了解其核心結構：

核心元素層級

🧱 Gutenberg 編輯器的核心結構層級：

元件層級	功能說明	簡易理解
容器（Group/Container區塊）	負責控制整體樣式、寬度、背景、Padding、內部排版邏輯	最外層的「容器」，可包含多種內容
欄位（Columns）	在Container中可以分成多欄（2欄、3欄等），每欄再塞內容	將容器分割成多個平行區域
功能區塊（內容）	文字、圖片、按鈕、清單、HTML等實際內容元件	最終呈現給用戶看的實際內容
多層巢狀（Nested）	Container中可以再塞Columns，Columns中可以再塞Group（遞迴巢狀）	容器中可以再包容器，無限套疊

結構示意圖（文字表示）

Group（全寬 Hero 區塊）
└── Columns（2 欄）
    ├── Column 1：文字 + 按鈕
    └── Column 2：圖片

Group（3 欄功能區）
└── Columns（3 欄）
    ├── Column 1：圖示 + 說明
    ├── Column 2：圖示 + 說明
    └── Column 3：圖示 + 說明

使用此結構的注意事項

1️⃣ 「很亂」的原因

• Gutenberg不像Figma有清楚的圖層標籤
• 一堆群組與欄位，如果沒備註或不折疊，很容易「迷路」
• 自訂模板時，若沒在最外層Group註解，可能會看不懂

2️⃣ 響應式設計依賴主題

• 雖然可以設定3欄，但主題決定在手機要不要疊成1欄
• Gutenberg原生無法「手動」控制手機欄數（除非搭配外掛）

調整區塊大小的解決方案

若要突破原生限制，調整區塊大小，有以下幾種方法：

1. 使用 CSS 類別自訂大小

將自訂CSS類別加到區塊上，然後加入相應的CSS：

.custom-image img {
  width: 240px;
  height: auto;
}

操作步驟：

1. 選擇區塊 → 區塊設定面板 → 進階 → CSS類別
2. 輸入自訂類別名（如「custom-image」）
3. 到WordPress後台 → 外觀 → 自訂 → 額外CSS，加入上述CSS

2. 使用進階區塊外掛

安裝較流行的進階區塊外掛，如：

• Kadence Blocks
• GenerateBlocks
• Spectra（原Ultimate Addons for Gutenberg）

這些外掛提供：

• 類似Elementor的拉大小功能
• 區塊寬度拖曳設定
• Padding/Margin自定義
• 欄位比例控制

3. 直接用HTML區塊寫死尺寸

對於一些簡單需求，可直接使用HTML區塊：

<img src="https://example.com/image.webp" style="width:300px; height:auto;">

4. 改用專業頁面編輯器

若需要大量自訂編輯：

• Elementor
• Bricks
• Beaver Builder

缺點是這些工具較為重量級，可能影響網站效能。

最佳實踐建議

圖像寬度控制

🎯 如果只是要控制圖像寬度，建議：

• 用「群組區塊」包起來
• 在圖片區塊中加上寬度控制（像素或百分比）
• 或使用「進階區塊外掛」開啟更多尺寸控制能力

排版結構建議

✅ 開發邏輯：

• 每個「功能段落」都用一個Group或Cover包起來
• 在Group裡用Columns分欄
• 再把文字、圖片、按鈕等區塊塞進去
• 最外層Group命名：例如 <!-- Hero 區段開始 --> 方便維護

總結

WordPress Gutenberg編輯器採用「區塊」思維，與自由設計工具不同。雖然在直接調整區塊大小上有限制，但通過CSS自訂、外掛擴展或分層設計思維，仍能達到大部分設計需求。理解其核心結構邏輯，能更有效地使用Gutenberg建構專業網站。